<template> 
  <div class="user-list-container"> 
    <!-- 左侧树形菜单 --> 
    <el-aside class="left-sidebar"> 
      <el-tree 
        :data="treeData" 
        node-key="id" 
        ref="tree" 
        @node-click="handleNodeClick" 
        :props="defaultProps"> 
      </el-tree> 
    </el-aside> 
 
    <!-- 右侧主内容区 --> 
    <div class="right-content"> 
      <!-- 顶部搜索栏 --> 
      <el-header class="top-search-bar"> 
        <el-form 
          :inline="true" 
          :model="searchForm" 
          class="search-form" 
          @submit.native.prevent>  
          
          <el-form-item label="登录名称：" prop="loginName"> 
            <el-input 
              v-model="searchForm.loginName"  
              placeholder="请输入" 
              clearable 
              style="width: 160px"> 
            </el-input> 
          </el-form-item> 
 
          <el-form-item label="手机号码：" prop="phoneNumber"> 
            <el-input 
              v-model="searchForm.phoneNumber"  
              placeholder="请输入" 
              clearable 
              style="width: 180px"> 
            </el-input> 
          </el-form-item> 
 
          <el-form-item label="用户状态：" prop="userStatus"> 
            <el-select 
              v-model="searchForm.userStatus"  
              placeholder="所有" 
              clearable 
              style="width: 120px"> 
              <el-option label="所有" value=""></el-option> 
              <el-option label="启用" value="enabled"></el-option> 
              <el-option label="禁用" value="disabled"></el-option> 
            </el-select> 
          </el-form-item> 
 
          <el-form-item label="创建时间：" prop="createTime"> 
            <el-date-picker 
              v-model="searchForm.createTime"  
              type="daterange" 
              range-separator="至" 
              start-placeholder="开始" 
              end-placeholder="结束" 
              value-format="yyyy-MM-dd" 
              style="width: 300px"> 
            </el-date-picker> 
          </el-form-item> 
          <el-button 
            type="primary" 
            icon="el-icon-search" 
            @click="handleSearch"> 
            搜索 
          </el-button> 
          <el-button 
            type="info" 
            icon="el-icon-refresh" 
            @click="handleReset"> 
            重置 
          </el-button> 
        </el-form> 
      </el-header> 
 
      <!-- 表格区域 --> 
      <el-main class="main-table"> 
        <el-table 
          :data="filteredTableData" 
          border 
          style="width: 100%" 
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" 
          height="calc(100vh - 180px)"> 
          
          <el-table-column 
            prop="userId" 
            label="用户ID" 
            width="90" 
            align="center" 
            header-align="center"> 
          </el-table-column> 
 
          <el-table-column 
            prop="loginName" 
            label="登录名称" 
            width="160" 
            align="center" 
            header-align="center" 
            show-overflow-tooltip> 
          </el-table-column> 
 
          <el-table-column 
            prop="userName" 
            label="用户名称" 
            width="120" 
            align="center" 
            header-align="center"> 
          </el-table-column> 
 
          <el-table-column 
            prop="department" 
            label="部门" 
            width="180" 
            align="center" 
            header-align="center"> 
          </el-table-column> 
 
          <el-table-column 
            prop="phoneNumber" 
            label="手机" 
            width="150" 
            align="center" 
            header-align="center"> 
          </el-table-column> 
 
          <el-table-column 
            label="用户状态" 
            width="120" 
            align="center" 
            header-align="center"> 
            <template slot-scope="scope"> 
              <span>{{ scope.row.userStatus  }}</span> 
            </template> 
          </el-table-column> 
 
          <el-table-column 
            prop="createTime" 
            label="创建时间" 
            width="160" 
            align="center" 
            header-align="center"> 
          </el-table-column> 
 
          <el-table-column 
            label="操作" 
            width="200" 
            fixed="right" 
            align="center" 
            header-align="center"> 
            <template slot-scope="scope"> 
              <el-button type="primary" style="margin-left: 15px" @click="handleEdit(scope.row)"> 编辑</el-button> 
              <el-button style="margin-left: 10px" @click="handleDelete(scope.row)"> 删除</el-button> 
            </template> 
          </el-table-column> 
        </el-table> 
      </el-main> 
    </div> 
 
    <!-- 编辑对话框 --> 
    <el-dialog 
      :visible.sync="editDialogVisible"  
      title="编辑用户信息" 
      width="30%"> 
      <el-form :model="editForm" label-width="100px"> 
        <el-form-item label="登录名称"> 
          <el-input v-model="editForm.loginName"></el-input>  
        </el-form-item> 
        <el-form-item label="用户名称"> 
          <el-input v-model="editForm.userName"></el-input>  
        </el-form-item> 
        <el-form-item label="部门"> 
          <el-input v-model="editForm.department"></el-input>  
        </el-form-item> 
        <el-form-item label="手机号码"> 
          <el-input v-model="editForm.phoneNumber"></el-input>  
        </el-form-item> 
        <el-form-item label="用户状态"> 
          <el-select v-model="editForm.userStatus">  
            <el-option label="启用" value="enabled"></el-option> 
            <el-option label="禁用" value="disabled"></el-option> 
          </el-select> 
        </el-form-item> 
      </el-form> 
      <template #footer> 
        <span class="dialog-footer"> 
          <el-button @click="editDialogVisible = false">取消</el-button> 
          <el-button type="primary" @click="saveEdit">保存</el-button> 
        </span> 
      </template> 
    </el-dialog> 
 
    <!-- 删除确认对话框 --> 
    <el-dialog 
      :visible.sync="deleteDialogVisible"  
      title="确认删除" 
      width="30%"> 
      <span>确定要删除该用户吗？</span> 
      <template #footer> 
        <span class="dialog-footer"> 
          <el-button @click="deleteDialogVisible = false">取消</el-button> 
          <el-button type="primary" @click="confirmDelete">确定</el-button> 
        </span> 
      </template> 
    </el-dialog> 
  </div> 
</template> 
 
<script> 
export default { 
  data() { 
    return { 
      defaultProps: { 
        children: 'children', 
        label: 'label' 
      }, 
      treeData: [ 
        { 
          id: 1, 
          label: "计算机学院", 
          children: [ 
            { id: 2, label: "计算机科学与技术" }, 
            { id: 3, label: "软件工程" }, 
            { id: 4, label: "网络工程" }, 
            { id: 5, label: "物联网工程" } 
          ] 
        } 
      ], 
      searchForm: { 
        loginName: "", 
        phoneNumber: "", 
        userStatus: "", 
        createTime: [] 
      }, 
      tableData: [ 
        { 
          userId: 55, 
          loginName: '163401010311', 
          userName: '杜金', 
          department: '计算机科学与技术', 
          phoneNumber: '○', 
          userStatus: '○', 
          createTime: '2020-01-06 18:09:54' 
        }, 
        { 
          userId: 54, 
          loginName: '163401010312', 
          userName: '董理', 
          department: '计算机科学与技术', 
          phoneNumber: '○', 
          userStatus: '○', 
          createTime: '2020-01-06 18:09:17' 
        }, 
        { 
          userId: 53, 
          loginName: '163401010314', 
          userName: '马行健', 
          department: '计算机科学与技术', 
          phoneNumber: '○', 
          userStatus: '○', 
          createTime: '2020-01-06 18:08:36' 
        }, 
        { 
          userId: 52, 
          loginName: '163401010323', 
          userName: '张昊辰', 
          department: '网络工程', 
          phoneNumber: '○', 
          userStatus: '○', 
          createTime: '2020-01-06 18:07:22' 
        }, 
        { 
          userId: 51, 
          loginName: '163401010322', 
          userName: '张庆阳', 
          department: '软件工程', 
          phoneNumber: '○', 
          userStatus: '○', 
          createTime: '2020-01-06 18:06:40' 
        }, 
        { 
          userId: 50, 
          loginName: '163401010321', 
          userName: '黄灿', 
          department: '物联网工程', 
          phoneNumber: '○', 
          userStatus: '○', 
          createTime: '2020-01-06 18:06:09' 
        }, 
        { 
          userId: 49, 
          loginName: '163401010320', 
          userName: '高钰清', 
          department: '网络工程', 
          phoneNumber: '○', 
          userStatus: '○', 
          createTime: '2020-01-06 18:05:37' 
        }, 
        { 
          userId: 48, 
          loginName: '163401010319', 
          userName: '王旭', 
          department: '计算机科学与技术', 
          phoneNumber: '○', 
          userStatus: '○', 
          createTime: '2020-01-06 18:04:57' 
        }, 
        { 
          userId: 1, 
          loginName: 'admin', 
          userName: 'admin', 
          department: '计算机科学与技术', 
          phoneNumber: '15841490867', // 特殊处理手机号 
          userStatus: '○', 
          createTime: '2018-03-16 11:33:00' 
        } 
      ], 
      editDialogVisible: false, 
      editForm: {}, 
      deleteDialogVisible: false, 
      currentDeleteId: null 
    }; 
  }, 
  computed: { 
    filteredTableData() { 
      let filteredData = this.tableData;  
 
      if (this.searchForm.loginName)  { 
        filteredData = filteredData.filter(item  => item.loginName.includes(this.searchForm.loginName));  
      } 
 
      if (this.searchForm.phoneNumber)  { 
        filteredData = filteredData.filter(item  => item.phoneNumber.includes(this.searchForm.phoneNumber));  
      } 
 
      if (this.searchForm.userStatus)  { 
        filteredData = filteredData.filter(item  => item.userStatus  === this.searchForm.userStatus);  
      } 
 
      if (this.searchForm.createTime  && this.searchForm.createTime.length  > 0) { 
        const [startDate, endDate] = this.searchForm.createTime;  
        filteredData = filteredData.filter(item  => { 
          const date = new Date(item.createTime.split('  ')[0]); 
          return (!startDate || date >= new Date(startDate)) && (!endDate || date <= new Date(endDate)); 
        }); 
      } 
 
      return filteredData; 
    } 
  }, 
  methods: { 
    handleNodeClick(data) { 
      console.log(data);  
    }, 
    handleSearch() { 
      // 搜索逻辑已经在 computed 中实现，这里可以添加额外逻辑 
      console.log(' 执行搜索操作'); 
    }, 
    handleReset() { 
      this.searchForm  = { 
        loginName: "", 
        phoneNumber: "", 
        userStatus: "", 
        createTime: [] 
      }; 
    }, 
    handleEdit(row) { 
      this.editForm  = { ...row }; 
      this.editDialogVisible  = true; 
    }, 
    saveEdit() { 
      const index = this.tableData.findIndex(item  => item.userId  === this.editForm.userId);  
      if (index !== -1) { 
        this.tableData.splice(index,  1, this.editForm);  
      } 
      this.editDialogVisible  = false; 
    }, 
    handleDelete(row) { 
      this.currentDeleteId  = row.userId;  
      this.deleteDialogVisible  = true; 
    }, 
    confirmDelete() { 
      const index = this.tableData.findIndex(item  => item.userId  === this.currentDeleteId);  
      if (index !== -1) { 
        this.tableData.splice(index,  1); 
      } 
      this.deleteDialogVisible  = false; 
    } 
  } 
}; 
</script> 

<style scoped>
.user-list-container {
  display: flex;
  height: 100vh;
  background: #fff;
}

.left-sidebar {
  width: 240px;
  border-right: 1px solid #e6ebf5;
  overflow: auto;
  padding: 16px;
}

.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* 修复flex布局溢出问题 */
}

.top-search-bar {
  background-color: #f0f2f5;
  padding: 16px;
  height: auto !important; /* 覆盖Element默认高度 */
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.main-table {
  flex: 1;
  padding: 0 16px 16px;
  overflow: hidden;
}

.el-table {
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.el-table::before {
  height: 0; /* 去除底部多余的线条 */
}

.el-table th {
  font-weight: 600;
}

.el-table .cell {
  padding: 8px 0;
}
</style>